<template>
  <div class="report-main">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="report-search">
      <div class="report-search-box">
        <single-list-filter-without-cb v-if="showInsuranceType" :filter="filterN" :type="'socialInsurance'"
                                       :leftTipText="'险种'"
                                       @confirmSingleSelect="confirmSingleSelectSocialInsurance">
        </single-list-filter-without-cb>
        <year-month :filter="filterN" ref="yearMonth" @getYearAndMonth="getYearAndMonth"></year-month>
        <a class="import-excel-text" :href="downloadHref"
           download="exportTownWorksBasicMedicareExcel">导出</a>
        <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
          <path :d="svgPath.closeFullScreen"/>
        </svg>
      </div>
    </div>
    <div class="report-wrapper">
      <div id="report-loading-five-risks" class="report-loading"></div>
      <keep-alive>
        <component v-bind:is="currentTabComponent" :siStatus="siStatus" :queryYear="queryYear" :month="queryMonth"
                   v-show="!showLoading"
                   @importExcelReport="importExcelReport"
                   @reloadData="getStateData"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
  import SingleListFilterWithoutCb from '../last/filter/single-list-filter-without-checkbox.vue'
  import {svgPath, quitFullScreen, loadingOpt} from "../../assets/js/utils";
  import {getSearchItems, baseApiF} from '../../api/api'
  import YearMonth from '../view/year-month.vue'
  import OldSiState from './five-si-state/old-si-state.vue'
  import MedSiState from './five-si-state/med-si-state.vue'
  import WorkHurtSiState from './five-si-state/work-hurt-si-state.vue'
  import LoseJobSiState from './five-si-state/lose-job-si-state.vue'
  import BornSiState from './five-si-state/born-si-state.vue'
  import {queryFiveInsuredsPersonSitu} from '../../api/report'
  import {
    getDefaultYear
  } from '../last/chart/utils/dataUtils'

  export default {
    props: ['isChange', 'fullScreen', 'pageChange'],
    components: {
      YearMonth,
      SingleListFilterWithoutCb,
      OldSiState,
      MedSiState,
      WorkHurtSiState,
      LoseJobSiState,
      BornSiState
    },
    data () {
      return {
        showLoading: true,
        downloadHref: 'javascript:;',
        siStatus: null,
        svgPath: svgPath,
        canShow: true,
        filterN: null,
        currentTabComponent: OldSiState,
        insuredType: '',
        queryYear: '',
        queryMonth: '',
        showInsuranceType: false,
      }
    },
    watch: {
      isChange () {
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      },
      pageChange () {
        this.getDefaultData();
        // this.$router.go(0);
      }
    },
    mounted () {
      this.myChart = this.$echarts.init(document.getElementById('report-loading-five-risks'), null, {renderer: 'canvas'})
      //给echart 加loading效果
      this.showLoading = true;
      this.myChart.showLoading(loadingOpt)
      this.getDefaultData();
    },
    methods: {
      getDefaultData(){
        let filter = this.$route.params.id;
        if (filter == 1001 ||  filter == 1000) {
          this.currentTabComponent = OldSiState
        } else if (filter == 1002) {
          this.currentTabComponent = MedSiState
        } else if (filter == 1003) {
          this.currentTabComponent = WorkHurtSiState
        } else if (filter == 1004) {
          this.currentTabComponent = LoseJobSiState
        } else if (filter == 1005) {
          this.currentTabComponent = BornSiState
        }
        this.myChart.showLoading(loadingOpt)
        this.getInsuranceType(filter)
      },
      //获取筛选数据
      getInsuranceType (insuranceType) {
          getSearchItems('init/initInput')
            .then((res) => {
              if (res.code == 0) {
                this.filterN = res.data;
                if (insuranceType == 1000) {
                  this.showInsuranceType = true;
                  this.insuredType = res.data.nc.insuranceTypes[0].selectId
                } else {
                  this.showInsuranceType = false;
                  this.insuredType = insuranceType;
                }
                this.queryYear = getDefaultYear(this.filterN) + ''
                this.$refs.yearMonth.setDefaultMonthAndPosition(this.queryYear)
                // this.getStateData()
              }
            });
      },
      getStateData () {
        //给echart 加loading效果
        this.showLoading = true;
        this.myChart.showLoading(loadingOpt)
        queryFiveInsuredsPersonSitu(this.insuredType, this.queryYear, this.queryMonth).then(response => {
          this.showLoading = false;
          this.myChart.hideLoading()
          if (response.code == 0) {
            this.siStatus = response
            this.importExcelReport();
          }
        }).catch(err => {
        })
      },
      importExcelReport (idArr, rankArr) {
        let areaId = '';
        let rank = '';
        idArr.map((item, index) => {
          areaId += `&areaId=${item}`
          rank += `&rank=${rankArr[index]}`
        })
//        console.log('11111=' + areaId)
//        console.log('22222=' + rank)
        let importExcelUrl = baseApiF() +
          `society/loadFiveInsuredsPersonSitu?insuredType=${this.insuredType}&year=${this.queryYear}&month=${this.queryMonth}${areaId}${rank}`
        this.downloadHref = importExcelUrl;
        console.log(importExcelUrl)
      },
      closeAll () {
        quitFullScreen();
      },
      getYearAndMonth (year, month, yearMonth) {
        this.queryYear = year + ''
        this.queryMonth = month + ''
        this.yearMonth = yearMonth
//        console.log('fffffffffffff ' + year + '  ' + month + " " + yearMonth)
        this.getStateData()
      },
      confirmSingleSelectSocialInsurance (filter) {
        if (filter == 1001) {
          this.currentTabComponent = OldSiState
        } else if (filter == 1002) {
          this.currentTabComponent = MedSiState
        } else if (filter == 1003) {
          this.currentTabComponent = WorkHurtSiState
        } else if (filter == 1004) {
          this.currentTabComponent = LoseJobSiState
        } else if (filter == 1005) {
          this.currentTabComponent = BornSiState
        }
        this.insuredType = filter + ''
        this.getStateData()
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/css/report.css";
</style>
